
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图示例</title>
    <!-- 引入图表文件 -->
    <script src="./js/echarts.js"></script>
</head>
<body>
    <!-- 图表容器 -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <div class="box" style="width: 600px;height: 500px;">
        <canvas></canvas>

    </div>
    <!-- 图表初始化脚本 -->
    <script>
        // 基于准备好的 DOM，初始化 echarts 实例
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        // 定义图表配置项
        var option = {
            title: {
                text: '示例柱状图'
            },
            tooltip: {},
            xAxis: {
                data: ['A', 'B', 'C', 'D', 'E']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '数据',
                type: 'bar',
                data: [10, 20, 30, 40, 50]
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);


        let arr = [1,2,3,4,5,6,7,8,9,10]
        //遍历数组并返回新的数组每个数组元素拼接张三
        let newArr = arr.map(item=>{
            return '张三'+item
        })
        console.log(newArr);
        // 写一个画布效果，并且在页面上加载一个画板
        class Canvas{
            constructor(id,width,height){
                this.id = id
                this.width = width
                this.height = height
                this.canvas = document.createElement('canvas')
                this.canvas.id = id
                this.canvas.width = width
                this.canvas.height = height
                document.body.appendChild(this.canvas)
                this.ctx = this.canvas.getContext('2d')
            }
            draw(){
                this.ctx.fillStyle = 'red'
                this.ctx.fillRect(0,0,this.width,this.height)
            }
            drawCircle(){
                this.ctx.fillStyle = 'blue'
                this.ctx.beginPath()
                this.ctx.arc(this.width/2,this.height/2,50,0,Math.PI*2)
                this.ctx.fill()
            }
            drawText(){
                this.ctx.fillStyle = 'black'
                this.ctx.font = '20px Arial'
                this.ctx.fillText('Hello World',this.width/2,this.height/2)
            }
            drawLine(){
                this.ctx.strokeStyle = 'green'
                this.ctx.lineWidth = 5
                this.ctx.beginPath()
                this.ctx.moveTo(0,0)
                this.ctx.lineTo(this.width,this.height)
                this.ctx.stroke()
            }
            drawRect(){
            }
            drawArc(){
            }
        }
        // 在页面上id为box的div中绘制一个圆形
        let canvas = new Canvas('box',500,500)
        canvas.draw()
        canvas.drawCircle()
    </script>
</body>
</html>
    
